在 d3 如果要把一個類別加到某個元素，會用 selection.attr() 函式。
attr() 是用來設定 DOM 的特性值，style() 是直接在某個元素上套用css樣式。

div

在檔案中加入這個css設定

div.bar{
			display:inline-block;
			width:20px;
			height:75px;
			background: #0a969b;
			margin-right:2px
		}

d3的部分則是

var dataset = [ 5, 10, 15, 20, 25 ];		d3.select("body").selectAll("div").data(dataset).enter()
		.append("div").attr("class","bar")
		.style("height",function(d){
			return d + "px";
		});

美化一下

var dataset = [ 5, 10, 15, 20, 25 ];		d3.select("body").selectAll("div").data(dataset).enter()
	.append("div").attr("class","bar")
	.style("height",function(d){
		var barHeight = d * 5; //高度5倍
		return barHeight + "px";
	});

隨機資料

var dataset = [];
for (var i = 0;i < 25; i++){
	var newNumber = Math.round(Math.random() * 30); //隨機30個整數
	dataset.push(newNumber);
}
d3.select("body").selectAll("div").data(dataset).enter()
	append("div").attr("class","bar")
	.style("height",function(d){
		var barHeight = d * 5;
		return barHeight + "px";
	});

svg

var w = 500;
var h = 100;
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
var circles = svg.selectAll("circle").data(dataset).enter().append("circle");
circles.attr("cx" , function(d, i){
	return(i * 50) + 25;
	}).attr("cy" , h/2).attr("r" ,function(d){
	return d;
});

cx 是圓形中心點的 x 軸，d的值仍然是dataset 內的，i 是被自動產生，這裡 i 可以隨意命名。
cy 是圓形中心點的 y 軸，把 cy 設定為 h 的一半，因為 h 是整個 svg 的高度，將 y 軸設定 h 除以 2 ，可以讓所有圓形都對齊垂直中心點。

加點顏色

.attr("fill","white")
.attr("stroke","orange")
.attr("stroke-width",function(d){
	return d/2;
});